<template>
  <div class="article-area-contianer">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
              <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            offset='50'
            >
         <van-cell v-for="(item,index) in articleList" :key="index" @click="toEssay(item.art_id)">
             <template #title>
                <span class="custom-title">{{item.title}}</span>
            </template>
            <template #default v-if="item.cover.type === 1">
                <van-image
                cover
                :src="item.cover.images[0]"
                >
                 <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                    </template>
                </van-image>
            </template>
            <!-- 底部作者信息评论数量等信息 -->
            <template #label>
                <div v-if="item.cover.type === 3" class="three-image">
                     <van-image
                cover
                :src="item.cover.images[0]"
                />
                      <van-image
                cover
                :src="item.cover.images[1]"
                />
                      <van-image
                cover
                :src="item.cover.images[2]"
                />
                </div>
                <div :class="{'one-image': item.cover.type === 1}">
                <span>{{item.aut_name}}</span>
                <span>{{item.comm_count}}评论</span>
                <span>{{item.pubdate | transfromRelativeTime}}</span>
                </div>
            </template>
         </van-cell>
            </van-list>
      </van-pull-refresh>
  </div>
</template>

<script>
import { getArticles } from 'network/news'
export default {
  name: 'ArcitleArea',
  props: {
    channelId: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      // 文章列表
      articleList: [],
      // 是否处于加载中
      loading: false,
      // 是否还有更多内容可以加载
      finished: false,
      times_tamp: new Date().getTime(),
      // 下拉的时候该值会被设置为true,触发刷新函数
      refreshing: false
    }
  },
  created () {
  },
  methods: {
    // 获取文章列表
    async onloadArticleList () {
      if (this.refreshing) {
        this.articleList = []
        this.refreshing = false
      }
      const { data: res } = await getArticles({
        channel_id: this.channelId,
        timestamp: this.times_tamp,
        with_top: 1
      })
      console.log(res)
      setTimeout(() => {
        this.articleList.push(...res.data.results)
        if (res.data.results.length < 10) {
          this.finished = true
        }
        this.times_tamp = res.data.pre_timestamp
        console.log('tongbu')
        this.loading = false
        console.log(this.articleList)
      }, 700)
    },
    onLoad () {
      // 异步更新数据
      this.onloadArticleList()
    },
    // 只要下拉就会触发这个函数
    onRefresh () {
      this.finished = false
      this.loading = true
      this.times_tamp = new Date().getTime()
      this.onLoad()
      setTimeout(() => {
        this.$toast({
          message: '刷新成功',
          position: 'top'
        })
      }, 1000)
    },
    toEssay (id) {
      this.$router.push({
        path: `/essay/${id}`
      })
    }
  }
}
</script>

<style lang='less' scoped>
      .article-area-contianer{
        position: fixed;
        top: 90px;
        bottom: 50px;
        left: 0;
        right: 0;
        overflow-y: auto;
        .van-cell__title{
            font-size: 16px;
            flex:2
        }
        .van-image{
            width: 117px;
            height: 72px;
        }
        .van-cell__value{
            flex: 1;
        }
        .one-image{
            margin-top:25px
        }
        .three-image{
            display: flex;
            margin-top:10px;
            margin-bottom: 10px;
        }
        .van-cell__label{
            span{
                margin-right: 15px;
            }
        }
    }
</style>
